<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;  
        }
        .div1{
            width: 47rem;
            height: 10rem;
            background-color: rgb(240,240,240);
            position: relative;
        }
        .d009{
            width: 1rem;
            height: 3rem;
            position: absolute;
            top: 3.5rem;
            left: 2rem;
        }
        .img1{
            width: 1rem;
            height: 3rem;
        }
        .d1{
            width: 34rem;
            height: 5rem;
            position: absolute;
            top: 3rem;
            left: 9rem;
            background-color: white;
        }
        .img2{
            width: 3rem;
            height: 3rem;
            position: absolute;
            top: 1rem;
            left: 2rem;
        }
        #i1{
            width: 20rem;
            height: 3rem;
            border-width: 0;
            position: absolute;
            top: 1rem;
            left: 6rem;
        }

        .div2{
            width: 47rem;
            height: 70rem;
            overflow: hidden;
        }
        .d2{
            width: 11rem;
            height: 70rem;
            background-color: rgb(240,240,240);
            float: left;
            
        }
        .c001{
            width: 11rem;
            height: 6rem;
            font-size: 1.5rem;
            box-sizing: border-box;
            padding-left: 2rem;
            line-height: 6rem;
            color: #4d4c4c;
            border-bottom: 0.2rem solid rgb(231, 231, 231);
        }

        .d3{
            width: 36rem;
            height: 70rem;
            float: left;
        }
        .d4{
            width: 35rem;
            height: 28rem;
            margin: 2rem 0 0 1rem;
            border-bottom: 0.2rem solid rgb(247, 246, 246);
        }
        .d01{
            width: 4rem;
            height: 2rem;
            font-size: 1.5rem;
            color: #4d4c4c;
        }
        .d02{
            width: 8rem;
            height: 2rem;
            font-size: 1.5rem;
            margin-top: 3rem;
            color: #494949;
            float: left;
            margin-left: 3rem;
        }
        /* .d07{
            margin-left: 3rem;
        } */

        .d5{
            width: 35rem;
            height: 19rem;
            margin: 2rem 0 0 1rem;
            border-bottom: 0.2rem solid rgb(248, 247, 247);
        }
        .d03{
            width: 4rem;
            height: 2rem;
            font-size: 1.5rem;
            color: #4d4c4c;
        }
        .d04{
            width: 8rem;
            height: 2rem;
            font-size: 1.5rem;
            margin-top: 3rem;
            color: #494949;
            float: left;
            margin-left: 3rem;
        }
        /* .d08{
            margin-left: 3rem;
        } */

        .d6{
            width: 35rem;
            height: 12rem;
            margin: 2rem 0 0 1rem;
        }
        .d05{
            width: 8rem;
            height: 2rem;
            font-size: 1.5rem;
            color: #4d4c4c;
        }
        .d06{
            width: 8rem;
            height: 2rem;
            font-size: 1.5rem;
            margin-top: 3rem;
            color: #494949;
            float: left;
            margin-left: 3rem;
        }
        /* .d09{
            margin-left: 3rem;
        } */

        .footer{
            width: 47rem;
            height: 6rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        #fd1{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            left: 3rem;
        }
        .fi1{
            width: 3rem;
            height: 3rem;
        }
        .p1{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }
        #fd2{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            left: 16rem;
        }
        .fi2{
            width: 3rem;
            height: 3rem;
        }
        .p2{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #fc4040;
            font-size: 1.2rem;
        }
        #fd3{
            width: 4rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            right: 15rem;
        }
        .fi3{
            width: 4rem;
            height: 3rem;
        }
        .p3{
            width: 4rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }
        #fd4{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            right: 3rem;
        }
        .fi4{
            width: 3rem;
            height: 3rem;
        }
        .p4{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }

        .da3{
            display: none;
            width: 36rem;
            height: 70rem;
            float: left;
        }
        .db3{
            display: none;
            width: 36rem;
            height: 70rem;
            float: left;
        }
        .dc3{
            display: none;
            width: 36rem;
            height: 70rem;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d009">
                <img src="img/1.png" alt="" id="img1">
            </div>
            <div class="d1">
                <img src="img/fdj.png" alt="" class="img2">
                <input type="text" id="i1" placeholder="搜索商品">
            </div>
        </div>

        <div class="div2">
            <div class="d2">
                <div class="c001" id="d001">一键选酒</div>
                <div class="c001" id="d002">葡萄酒</div>
                <div class="c001" id="d003">白酒</div>
                <div class="c001" id="d004">洋酒</div>
                <div class="c001" id="d005">啤酒</div>
                <div class="c001" id="d006">黄酒/养生</div>
                <div class="c001" id="d007">酒周边</div>
                <div class="c001" id="d008">其他</div>
            </div>

            <div class="d3">
                <div class="d4">
                    <div class="d01">产区</div>
                    <div class="d02 d07">波尔多</div>
                    <div class="d02">勃艮第</div>
                    <div class="d02">香槟</div>
                    <div class="d02 d07">罗纳河谷</div>
                    <div class="d02">南澳</div>
                    <div class="d02">西澳</div>
                    <div class="d02 d07">东南澳</div>
                    <div class="d02">新南威尔士</div>
                    <div class="d02">维多利亚</div>
                    <div class="d02 d07">莫舍尔</div>
                    <div class="d02">莱茵高</div>
                    <div class="d02">莱茵黑森</div>
                    <div class="d02 d07">法尔茨</div>
                </div>

                <div class="d5">
                    <div class="d03">类型</div>
                    <div class="d04 d08">红葡萄酒</div>
                    <div class="d04">白葡萄酒</div>
                    <div class="d04">桃红葡萄酒</div>
                    <div class="d04 d08">甜白葡萄酒</div>
                    <div class="d04">贵腐酒</div>
                    <div class="d04">其他起泡酒</div>
                    <div class="d04 d08">香槟</div>
                    <div class="d04">冰酒</div>
                    <div class="d04">加强葡萄酒</div>
                </div>

                <div class="d6">
                    <div class="d05">葡萄品种</div>
                    <div class="d06 d09">赤霞珠</div>
                    <div class="d06">美乐</div>
                    <div class="d06">品丽珠</div>
                    <div class="d06 d09">黑皮诺</div>
                    <div class="d06">马尔贝克</div>
                </div>
            </div>


            <div class="da3">
                <div class="d4">
                    <div class="d01">产区</div>
                    <div class="d02 d07">川贵地区</div>
                    <div class="d02">华南</div>
                    <div class="d02">黄河流域</div>
                    <div class="d02 d07">中原</div>
                    <div class="d02">北方</div>
                    <div class="d02">川贵地区</div>
                    <div class="d02 d07">华南</div>
                    <div class="d02">黄河流域</div>
                    <div class="d02">中原</div>
                    <div class="d02 d07">北方</div>
                    <div class="d02">黄河流域</div>
                    <div class="d02">中原</div>
                    <div class="d02 d07">北方</div>
                </div>

                <div class="d5">
                    <div class="d03">类型</div>
                    <div class="d04 d08">茅台酒</div>
                    <div class="d04">贵州贵酒</div>
                    <div class="d04">双沟酒</div>
                    <div class="d04 d08">郎酒</div>
                    <div class="d04">茅台酒</div>
                    <div class="d04">贵州贵酒</div>
                    <div class="d04 d08">双沟酒</div>
                    <div class="d04">郎酒</div>
                    <div class="d04">茅台酒</div>
                </div>

                <div class="d6">
                    <div class="d05">酒的品种</div>
                    <div class="d06 d09">汾酒</div>
                    <div class="d06">剑南春</div>
                    <div class="d06">洋河</div>
                    <div class="d06 d09">古井</div>
                    <div class="d06">水井坊</div>
                </div>
            </div>


            <div class="db3">
                <div class="d4">
                    <div class="d01">产区</div>
                    <div class="d02 d07">法国</div>
                    <div class="d02">英国</div>
                    <div class="d02">中国</div>
                    <div class="d02 d07">澳洲</div>
                    <div class="d02">南澳</div>
                    <div class="d02">西澳</div>
                    <div class="d02 d07">东南澳</div>
                    <div class="d02">新南威尔士</div>
                    <div class="d02">维多利亚</div>
                    <div class="d02 d07">莫舍尔</div>
                    <div class="d02">莱茵高</div>
                    <div class="d02">莱茵黑森</div>
                    <div class="d02 d07">法尔茨</div>
                </div>

                <div class="d5">
                    <div class="d03">类型</div>
                    <div class="d04 d08">葡萄酒</div>
                    <div class="d04">啤酒</div>
                    <div class="d04">米酒</div>
                    <div class="d04 d08">果洒</div>
                    <div class="d04">白兰地</div>
                    <div class="d04">威士忌</div>
                    <div class="d04 d08">伏特加</div>
                    <div class="d04">利口酒</div>
                    <div class="d04">朗姆酒</div>
                </div>

                <div class="d6">
                    <div class="d05">洋酒品种</div>
                    <div class="d06 d09">红方</div>
                    <div class="d06">黑方</div>
                    <div class="d06">蓝方</div>
                    <div class="d06 d09">赤霞珠</div>
                    <div class="d06">品丽珠</div>
                </div>
            </div>


            <div class="dc3">
                <div class="d4">
                    <div class="d01">产区</div>
                    <div class="d02 d07">青岛</div>
                    <div class="d02">山东</div>
                    <div class="d02">澳大利亚</div>
                    <div class="d02 d07">新西兰</div>
                    <div class="d02">日本</div>
                    <div class="d02">韩国</div>
                    <div class="d02 d07">意大利</div>
                    <div class="d02">南非</div>
                    <div class="d02">维多利亚</div>
                    <div class="d02 d07">莫舍尔</div>
                    <div class="d02">莱茵高</div>
                    <div class="d02">莱茵黑森</div>
                    <div class="d02 d07">法尔茨</div>
                </div>

                <div class="d5">
                    <div class="d03">类型</div>
                    <div class="d04 d08">纯生啤酒</div>
                    <div class="d04">干啤酒</div>
                    <div class="d04">全麦芽啤酒</div>
                    <div class="d04 d08">黑啤酒</div>
                    <div class="d04">无醇啤酒</div>
                    <div class="d04">冰啤酒</div>
                    <div class="d04 d08">淡色啤酒</div>
                    <div class="d04">鲜啤酒</div>
                    <div class="d04">果味啤酒</div>
                </div>

                <div class="d6">
                    <div class="d05">发酵种类</div>
                    <div class="d06 d09">艾尔</div>
                    <div class="d06">拉格</div>
                    <div class="d06">低浓度</div>
                    <div class="d06 d09">高浓度</div>
                    <div class="d06">鲜啤酒</div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div id="fd1">
                <img src="img/home.png" alt="" class="fi1">
                <div class="p1">首页</div>
            </div>
            <div id="fd2">
                <img src="img/category.png" alt="" class="fi2">
                <div class="p2">分类</div>
            </div>
            <div id="fd3">
                <img src="img/cart.png" alt="" class="fi3">
                <div class="p3">购物车</div>
            </div>
            <div id="fd4">
                <img src="img/mine.png" alt="" class="fi4">
                <div class="p4">我的</div>
            </div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        
            //显示隐藏
            // var divs = document.getElementsByClassName("c001");
            // console.log(divs)
            // $(divs).on("click",function(){
            //     // for(var i = 0;i < divs.length;i++){
            //         // var dd = divs.chlidren()
            //         $(divs).css({
            //             width: "11rem",
            //             height: "6rem",
            //             fontSize: "1.5rem",
            //             lineHeight: "6rem",
            //             color: "#4d4c4c",
            //             backgroundColor:"white",
            //             boxSizing:"border-box",
            //             borderLeft:"0.6rem solid red",
            //             borderBottom: "0",
            //             paddingLeft: "1.4rem",
            //         })
            //     // }
            // })
		
            $(".c001:eq(1)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

        //选择
        $(".c001:eq(1)").on("click",function(){
            $(".d3").css("display","block");
            $(".da3").css("display","none");
            $(".db3").css("display","none");
            $(".dc3").css("display","none");

            $(".c001:eq(1)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(4),.c001:eq(3),.c001:eq(2),.c001:eq(0),.c001:eq(5),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })

        $(".c001:eq(2)").on("click",function(){
            $(".da3").css("display","block");
            $(".d3").css("display","none");
            $(".db3").css("display","none");
            $(".dc3").css("display","none");

            $(".c001:eq(2)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(4),.c001:eq(3),.c001:eq(1),.c001:eq(0),.c001:eq(5),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })
        $(".c001:eq(3)").on("click",function(){
            $(".db3").css("display","block");
            $(".da3").css("display","none");
            $(".d3").css("display","none");
            $(".dc3").css("display","none");

            $(".c001:eq(3)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(4),.c001:eq(1),.c001:eq(2),.c001:eq(0),.c001:eq(5),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })
        $(".c001:eq(4)").on("click",function(){
            $(".dc3").css("display","block");
            $(".da3").css("display","none");
            $(".db3").css("display","none");
            $(".d3").css("display","none");

            $(".c001:eq(4)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(1),.c001:eq(3),.c001:eq(2),.c001:eq(0),.c001:eq(5),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })

        $(".c001:eq(0)").on("click",function(){
            $(".dc3").css("display","block");

            $(".c001:eq(0)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(1),.c001:eq(3),.c001:eq(2),.c001:eq(4),.c001:eq(5),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })

        $(".c001:eq(5)").on("click",function(){
            $(".dc3").css("display","block");

            $(".c001:eq(5)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(1),.c001:eq(3),.c001:eq(2),.c001:eq(4),.c001:eq(0),.c001:eq(6),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })

        $(".c001:eq(6)").on("click",function(){
            $(".dc3").css("display","block");

            $(".c001:eq(6)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(1),.c001:eq(3),.c001:eq(2),.c001:eq(0),.c001:eq(5),.c001:eq(4),.c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })

        $(".c001:eq(7)").on("click",function(){
            $(".dc3").css("display","block");

            $(".c001:eq(7)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"white",
                        boxSizing:"border-box",
                        borderLeft:"0.6rem solid red",
                        borderBottom: "0",
                        paddingLeft: "1.4rem",
                    })

            $(".c001:eq(1),.c001:eq(3),.c001:eq(2),.c001:eq(4),.c001:eq(5),.c001:eq(6),.c001:eq(0)").css({
                        width: "11rem",
                        height: "6rem",
                        fontSize: "1.5rem",
                        lineHeight: "6rem",
                        color: "#4d4c4c",
                        backgroundColor:"rgb(240,240,240)",
                        boxSizing:"border-box",
                        borderBottom: "0",
                        paddingLeft: "2rem",
                        borderLeft:"0",
            })
        })


        //模糊查询
        var b = document.getElementsByClassName("d02");
        var c = document.getElementsByClassName("d04");
        var d = document.getElementsByClassName("d06");

        console.log(b)

        i1.oninput = function(){
                //正则选择内容
			var reg = new RegExp(this.value, "g");
			$(b).each(function(v, i) {
                var str = $("#i1").val();
                console.log(str)
                for(var i = 0; i < b.length; i++){
	                if(b[i].innerHTML.includes(str)){
			            b[i].style.display = "block";		
		            }
	                else{
			            b[i].style.display = "none";
		            }
	            }
                for(var i = 0; i < c.length; i++){
	                if(c[i].innerHTML.includes(str)){
			            c[i].style.display = "block";		
		            }
	                else{
			            c[i].style.display = "none";
		            }
	            }
                for(var i = 0; i < d.length; i++){
	                if(d[i].innerHTML.includes(str)){
			            d[i].style.display = "block";		
		            }
	                else{
			            d[i].style.display = "none";
		            }
	            }
			})
        }


        $("#fd1").click(function(){
			window.location.href="首页.html";
		})

        $("#fd3").click(function(){
			window.location.href="购物车.html";
		})

        $("#fd4").click(function(){
			window.location.href="我的.html";
		})

        $(".d009").click(function(){
			window.location.href="首页.html";
		})

        $(".d02").click(function(){
			window.location.href="店铺.html";
		})
    </script>
</body>
</html>